import React, { useEffect, useState } from 'react';
import { getHospitalList, getUpdateStatus} from "@/api/hosp";
import { Button, Space, Switch, Table } from "antd";
import {useNavigate} from "react-router-dom";

function HospitalList() {
    const navigate = useNavigate();
    const [hospitalList, setHospitalList] = useState([]);
    const [pageInfo, setPageInfo] = useState({
        current:1,
        pageSize:4,
        total:10
    })
    const [loading,setLoading] = useState(false);
    const getHospitalListAsync = async function(current:number, pageSize:number){
        setLoading(true);
        const result = await getHospitalList(current, pageSize);
        setPageInfo({
            pageSize:result.data.size,
            current:result.data.number+1,
            total:result.data.totalElements
        })
        setHospitalList(result.data.content);
        setLoading(false);
    }
    useEffect(() => {
        // 条用医院列表
        getHospitalListAsync(pageInfo.current,pageInfo.pageSize)
    }, [])
    return (
        <div>
            <Table
            loading= {loading}
                bordered={true}
                rowKey={"id"}
                pagination={{
                    ...pageInfo,
                    onChange:getHospitalListAsync,
                }}
                columns={[
                    {
                        title: "序号",
                        align: "center",
                        render(value, rows, index) {
                            return index + 1;
                        }
                    }, {
                        title: "医院名称",
                        align: "center",
                        dataIndex: "hosname"
                    }, {
                        title: "医院编码",
                        align: "center",
                        dataIndex: "hoscode"
                    }, {
                        title: "医院LOGO",
                        align: "center",
                        dataIndex: "logoData",
                        render(logoData) {
                            return (
                                <img width={50} src={"data:image/png;base64," + logoData} alt="" />
                            )
                        }
                    }, {
                        title: "是否上线",
                        align: "center",
                        render(rows) {
                            return (
                                <Switch onChange={async()=>{
                                    await getUpdateStatus(rows.id,rows.status===1?0:1);
                                    await getHospitalListAsync(pageInfo.current,pageInfo.pageSize);
                                }} checked={rows.status===1}></Switch>
                            )
                        }
                    }, {
                        title: "医院等级",
                        align: "center",
                        dataIndex: "param",
                        render({ hostypeString }) {
                            return hostypeString;
                        }
                    }, {
                        title: "医院地址",
                        align: "center",
                        dataIndex: "param",
                        render({ fullAddress }) {
                            return fullAddress;
                        }
                    }, {
                        title: "创建时间",
                        align: "center",
                        dataIndex: "createTime"
                    }, {
                        title: "操作",
                        align: "center",
                        dataIndex:"id",
                        fixed: "right",
                        render(id) {
                            return (
                                <Space>
                                    <Button onClick={()=>{
                                        navigate("/hospital/show/"+id)
                                    }} type={"primary"}>查看</Button>
                                    <Button  type={"primary"}>排班</Button>
                                </Space>
                            )
                        }
                    }
                ]}
                scroll={{
                    x:1500
                }}
                dataSource={hospitalList}
            >

            </Table>
        </div>
    );
}

export default HospitalList;